<template>
    <div class="menu-nav">
        <!--头部-->
        <div class="header">
            <div class="logo">
                <!--<router-link></router-link>-->
            </div>
            <div class="nav">
                <ul>
                    <li v-for="item in navs" @click="to_lv2(item.id)" :class="{leave1_act:item.id===lv1_selected_id}">
                        <!--<router-link :to="{name:`${item.id}`}">{{item.title}}</router-link>-->
                        {{item.title}}
                    </li>
                </ul>
            </div>
            <div class="admin">
                <ul>
                    <li><a href="" target="_blank" class="to-pc">商城首页</a></li>
                    <li class="last-li">
                        <el-dropdown trigger="click">
                          <span class="el-dropdown-link">
                            快捷<i class="el-icon-caret-bottom el-icon--right"></i>
                          </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="0">清除缓存</el-dropdown-item>
                                <el-dropdown-item command="1">安全退出</el-dropdown-item>
                                <el-dropdown-item command="2">修改密码</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                </ul>
            </div>
        </div>
        <!--左侧-->
        <div class="left">
            <div class="leave2">
                <ul>
                    <li v-for="ite in lv2" @click="to_lv3(ite.id)" :class="{leave2_act:ite.id===lv2_selected_id}">
                        <!--<router-link :to="{name:`${ite .id}`}">{{ite.title}}</router-link>-->
                        {{ite.title}}
                    </li>
                </ul>
            </div>
            <div class="leave3" >
                <ul>
                    <li v-for="it in lv3" @click="to_select(it.id)" :class="{leave3_act:it.id===lv3_selected_id}">
                        <router-link :to="{name:it.id}" tag="div">
                            {{it.title}}
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            navs: [], //全部菜单
            lv1_selected_id: '',
            lv2_selected_id: '',
            lv3_selected_id: '',
            lv2: [], //选中一级菜单下的二级菜单
            lv3: [], //选中二级菜单下的三级菜单
        }
    },
    computed: { //计算属性   计算属性是基于它们的依赖进行缓存的

    },
    watch: {
    },
    //在实例创建完成后被立即调用。
    // 在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
    // 然而，挂载阶段还没开始，$el 属性目前不可见。
    created() {
            //请求菜单列表
        axios.post(this.adminApi('/menu'))
        .then(res => {
            if (res.data.code === 0) { //成功
                this.navs = res.data.adminMenu;

                this.navs.forEach(item => { //被选中一级 二级 三级
                        item.childs.forEach(ite => {
                            ite.childs.forEach(it => {
                                if (it.id === this.$route.name) {
                                    this.lv3_selected_id = it.id;
                                    this.lv2_selected_id = ite.id;
                                    this.lv1_selected_id = item.id;
                                }
                            })
                        })
                })
                // console.log(this.lv1_selected_id,this.lv2_selected_id,this.lv3_selected_id)
                if (this.lv1_selected_id) { //被选中一级菜单下的二级菜单和三级菜单
                    this.navs.forEach(item=> {
                        if (item.id === this.lv1_selected_id) {
                            this.lv2 = item.childs;
                            item.childs.forEach(ite=> {
                                if (this.lv2_selected_id && ite.id === this.lv2_selected_id) {
                                        this.lv3 = ite.childs;
                                }
                            })
                        }
                    })
                }
            } else { //
                this.$message.error('获取菜单栏失败');
            }
        })
        .catch(res => {
            console.log(res);
        });
    },
    mounted() {

    },
    methods: {
        //被选中一级菜单栏下的二级菜单栏
        to_lv2(lv1_selected_id) {
            this.lv1_selected_id = lv1_selected_id
            this.lv2 = []
            if (lv1_selected_id) { //被选中一级菜单下的二级菜单和三级菜单
                this.navs.forEach(item=> {
                    if (item.id === lv1_selected_id) {
                        this.lv2_selected_id = item.childs[0].id //被选中一级菜单下的第一个二级菜单
                        item.childs.forEach(ite=> {
                            this.lv2.push(ite); //被选中一级菜单下的所有二级菜单
                            if (item.childs[0].id === ite.id) {
                                this.lv3_selected_id = ite.childs[0].id //被选中一级菜单下的第一个三级菜单
                            }
                        })
                    }
                })
                this.$router.push({name: this.lv3_selected_id})
            }
        },
        //被选中二级菜单下的三级菜单栏
        to_lv3(lv2_selected_id) {
            this.lv2_selected_id = lv2_selected_id;
            this.lv3 = []
            if (lv2_selected_id) {
                this.navs.forEach(item=> {
                    item.childs.forEach(ite=> {
                       if (ite.id === lv2_selected_id) {
                           this.lv3_selected_id = ite.childs[0].id
                           ite.childs.forEach(it=> {
                               this.lv3.push(it)
                           })
                           this.$router.push({name: this.lv3_selected_id})
                       }
                    })
                })
            }
        },
        //被选中三级菜单
        to_select(lv3_selected_id) {
            this.lv3_selected_id = lv3_selected_id;
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    /*头部*/
    .header {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 111;
        height: 65px;
        width: 100%;
        min-width: 1000px;
        background-color: #1cadf1;
        color: #fff;
        box-sizing: border-box;
    }

    .header > div {
        float: left;
    }

    .logo {
        width: 265px;
        line-height: 65px;
        padding-left: 25px;
        box-sizing: border-box;
        font-size: 24px;
        font-weight: bold;
    }

    .logo a {
        display: block;
        color: #fff;
    }

    .nav li {
        float: left;
        width: 105px;
        height: 65px;
        line-height: 65px;
        text-align: center;
        font-size: 16px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .nav li > div {
        height: 65px;
        padding-top: 23px;
        box-sizing: border-box;
    }

    .nav li a {
        color: #fff;
    }

    .leave1_act {
        background-color: #0f86be;
    }

    .leave1_act p {
        border: none;
    }

    .nav li:last-child p {
        border: none;
    }

    .nav li p {
        height: 20px;
        line-height: 20px;
        border-right: 1px solid #5dc2f1;
    }

    .header .admin {
        line-height: 65px;
        text-align: center;
        float: right;
        margin-right: 20px;
        font-size: 14px;
        cursor: pointer;
    }

    .to-pc {
        color: #fff;
        font-size: 16px;
    }

    .admin li {
        float: left;
        width: 120px;
        border-right: 1px solid #4ac0f6;
    }

    .admin .last-li {
        border: none;
    }

    .el-dropdown-link {
        color: #fff;
    }

    /*左侧*/
    .left {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        padding-top: 65px;
        width: 265px;
        height: 100%;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
    }

    .left li {
        cursor: pointer;
    }

    .leave2 {
        float: left;
        width: 85px;
        height: 100%;
        background-color: #2399d0;
        color: #fff;
    }

    .leave2_act {
        background-color: #fdb61e;
    }

    .leave2 div {
        line-height: 50px;
        cursor: pointer;
    }

    .leave2 li, .leave3 li {
        height: 62px;
        padding-top: 12px;
        box-sizing: border-box;
    }

    .leave3 {
        margin-left: 85px;
        height: 100%;
        background-color: #EEE9E9;
        border-right: 1px solid #d1dadc;
    }

    .leave3_act {
        background-color: #fff;
    }

    .leave3 li div {
        color: #333;
        cursor: pointer;
        line-height: 50px;
    }
</style>